<template>
  <div class="patient-info-container">
    <!-- 更新信息表单 -->
    <el-card shadow="hover" class="form-card">
      <h2 class="section-title">患者信息更新</h2>
      <el-form
        :model="updateForm"
        :rules="updateRule"
        :ref="(el:any)=>{updateRef=el}"
        label-position="top"
        class="responsive-form"
      >
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12">
            <el-form-item label="用户名" prop="username">
              <el-input
                v-model="updateForm.username"
                placeholder="4-16位字母/数字/下划线"
                prefix-icon="el-icon-user"
                clearable
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12">
            <el-form-item label="密码" prop="password">
              <el-input
                v-model="updateForm.password"
                type="password"
                placeholder="至少8位含大小写字母+数字+特殊字符"
                prefix-icon="el-icon-lock"
                show-password
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-button type="primary" class="submit-btn" @click="handleUpdate">
          <i class="el-icon-upload"></i> 更新信息
        </el-button>
      </el-form>
    </el-card>

    <!-- 绑定信息表单 -->
    <el-card shadow="hover" class="form-card">
      <h2 class="section-title">患者信息绑定</h2>
      <el-form
        :model="bindForm"
        :rules="bindRule"
        :ref="(el:any)=>{bindRef=el}"
        label-position="top"
        class="responsive-form"
      >
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="8">
            <el-form-item label="身份证号">
              <el-input
                v-model="bindForm.idCard"
                placeholder="请输入18位身份证号"
                prefix-icon="el-icon-postcard"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8">
            <el-form-item label="年龄">
              <el-input-number
                v-model="bindForm.age"
                :min="0"
                :max="120"
                controls-position="right"
              >
              </el-input-number>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8">
            <el-form-item label="性别">
              <el-select
                v-model="bindForm.sex"
                placeholder="请选择"
                popper-class="gender-select"
              >
                <el-option label="男" value="男">
                  <i class="el-icon-male"></i> 男
                </el-option>
                <el-option label="女" value="女">
                  <i class="el-icon-female"></i> 女
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-button type="success" class="submit-btn" @click="handleBind">
          <i class="el-icon-connection"></i> 立即绑定
        </el-button>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance } from "vue";
const instance = getCurrentInstance();
const proxy = instance?.proxy as any;

import { usePatientDiagnosisStore } from "@/stores/patientDiagnosisStore";
const patientDiagnosisStore = usePatientDiagnosisStore();
const patientData = patientDiagnosisStore.getPatientInfo();

import { PatientUpdateForm, PatientBindForm } from "@/types/patient";
import { ElForm } from "element-plus";
import verify from "@/utils/verify";
import { RequestParams } from "@/types/request";

//formdata
const updateForm = ref<PatientUpdateForm>({
  username: patientData ? patientData.username : "",
  password: "",
});
const bindForm = ref<PatientBindForm>({
  idCard: "",
  age: 0,
  sex: "男",
});

//refs
const updateRef = ref<InstanceType<typeof ElForm> | null>();
const bindRef = ref<InstanceType<typeof ElForm> | null>();

const updateRule = ref({
  username: [
    {
      validator: verify.username,
      message: "格式不正确，必须是4到16个字符，只能包含字母、数字和下划线",
      trigger: "blur",
    },
  ],
  password: [
    {
      validator: verify.password,
      message:
        "格式不正确，必须至少8个字符，包含一个数字、一个大写字母、一个小写字母和一个特殊字符",
      trigger: "blur",
    },
  ],
});
const bindRule = ref({
  idCard: [
    {
      validator: verify.idCard,
      message: "身份证号格式不正确",
      trigger: "blur",
    },
  ],
});

const handleUpdate = async () => {
  await updateRef.value?.validate();
  try {
    let result: any = await proxy.request({
      method: "post",
      url: proxy.api.patientsUpdate,
      data: {
        username: updateForm.value.username,
        password: updateForm.value.password,
      } as RequestParams,
      headers: {
        token: patientData.token,
        "Content-Type": "application/json",
      },
    });
    if (!result) {
      return;
    }
    if (result.code === 1) {
      proxy.message.success("患者信息更新成功");
      patientDiagnosisStore.setPatientInfo(updateForm.value.username);
    } else {
      proxy.message.warning("更新失败");
    }
  } catch (error) {
    proxy.message.error("更新失败，请检查网络连接");
  }
};

const handleBind = async () => {
  await bindRef.value?.validate();
  try {
    let result: any = await proxy.request({
      method: "post",
      url: proxy.api.patientsBind,
      data: {
        name: updateForm.value.username,
        idCard: bindForm.value.idCard,
        age: bindForm.value.age,
        sex: bindForm.value.sex,
      } as RequestParams,
      headers: {
        token: patientData.token,
        "Content-Type": "application/json",
      },
    });
    if (!result) {
      return;
    }
    if (result.code === 1) {
      proxy.message.success("患者信息绑定成功");
    } else {
      proxy.message.warning("绑定失败");
    }
  } catch (error) {
    proxy.message.error("绑定失败，请检查网络连接");
  }
};
</script>

<style scoped>
.patient-info-container {
  max-width: 1200px;
  margin: 20px auto;
  /* padding: 20px; */
}

.form-card {
  margin-bottom: 30px;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.section-title {
  color: #2c3e50;
  font-size: 1.5rem;
  margin-bottom: 25px;
  padding-bottom: 10px;
  border-bottom: 2px solid #409eff;
}

.responsive-form {
  padding: 20px;
}

:deep(.el-form-item__label) {
  font-weight: 600;
  color: #606266;
  margin-bottom: 8px;
}

:deep(.el-input__inner) {
  border-radius: 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

:deep(.el-input__inner:focus) {
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}

.submit-btn {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  border-radius: 8px;
  background: linear-gradient(135deg, #409eff, #3375b9);
  transition: all 0.3s ease;
}

.gender-select {
  .el-icon-male {
    color: #409eff;
    margin-right: 8px;
  }
  .el-icon-female {
    color: #f56c6c;
    margin-right: 8px;
  }
}

@media (max-width: 768px) {
  .patient-info-container {
    padding: 10px;
  }

  .form-card {
    margin-bottom: 20px;
  }

  :deep(.el-form-item__label) {
    font-size: 14px;
  }
}
</style>
